<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <title>图文聊天--Layui</title>
    <link rel="stylesheet" href="css/zcm-main.css"/>
    <link rel="stylesheet" href="css/pic_txt.css"/>
    <link rel="stylesheet" href="layui/css/layui.css" media="all"/>

    <script type="text/javascript" src="js/jquery-3.6.0.js"></script>
    <script type="text/javascript" src="js/jquery.cookie.js"></script>
    <script type="text/javascript" src="layer/layer.js"></script>
    <script type="text/javascript" src="js/constants.js"></script>
    <script type="text/javascript" src="layui/layui.js"></script>
    <script type="text/javascript" src="pic_txt.js"></script>
</head>
<body class="full-page">
<div class="flex flex-column" style="width: 605px;height: 750px;font-size: 18px">
    <div class="flex flex-row" style="height: 60px;width: 100%;background: #E6E6E6">
        <div class="flex flex-row a-center " style="width: 480px;">
            <label style="padding-left: 30px" onclick="onSendBack()">&lt;&nbsp;返回</label>
        </div>
        <!--        <div class="flex flex-row a-center j-center close">-->
        <!--            <label style="font-size: 16px;color: #FFFFFF;cursor: pointer;" onclick="onSendClose()">挂断</label>-->
        <!--        </div>-->
        <!--        <img src="img/x.png"-->
        <!--             style="width: 40px;height: 40px;margin-left: 20px;margin-top: 15px;cursor: pointer;"-->
        <!--             onclick="onSendClose()"/>-->
        <div class="flex flex-row a-center ">
            <img src="img/x.png"
                 style="width: 22px;height: 22px;padding:0 5px;cursor: pointer;"
                 onclick="onSendClose()"/><label style="color: #FF5722" onclick="onSendClose()">结束问诊</label></div>
    </div>

    <div id="chatList" class="flex flex-column"
         style="width: 605px;height: 100%;background-color: #FFFFFF;overflow: scroll;flex-flow: column-reverse;">
        <!-- 对方的文字聊天视图 -->
        <script type="text/chatHeText">
					<div class="flex flex-row" style="height: auto;margin-top: 15px;margin-bottom: 15px;margin-left: 20px;">
						<img src="{icon}" style="width: 40px;height: 40px;border-radius: 5px;" />
						<div class="flex flex-column">
							<input class="clear-bg" type="text" disabled="true" value="{time}" style="font-size: 12px;color: #989898;
								margin-left: 14px;width:160px"></input>
							<div class="flex flex-row" style="margin-left: 5px;">
								<img src="img/chat/chat_left_arrows.png" style="width: 13px;height: 15px;margin-top: 10px;" />
								<div class="flex flex-wrap a-center" style="font-size: 16px; color: #333333;min-width: 50px;max-width: 350px; min-height: 20px;background: #E6E6E6;
										border-radius: 5px;text-align: center;padding: 10px;margin-top: 5px;">{message}</div>
							</div>
						</div>
					</div>




        </script>
        <!-- 我的文字聊天视图 -->
        <script type="text/chatMyText">
					<div class="flex flex-row j-end" style="margin-top: 15px;margin-bottom: 15px;margin-right: 20px;height: auto;">
						<div class="flex flex-column a-end">
							<input class="clear-bg" type="text" disabled="true" value="{time}" style="font-size: 12px;color: #989898;text-align: end;margin-right: 14px;width:160px"></input>
							<div class="flex flex-row" style="margin-right: 5px;">
								<div class="flex flex-wrap a-center" style="font-size: 16px; color: #333333;min-width: 50px;max-width: 350px;height: auto; min-height: 20px;background: #B2D3FF;
										border-radius: 5px;text-align: center;padding: 10px;margin-top: 5px;">{message}</div>
								<img src="img/chat/chat_right_arrows.png" style="width: 13px;height: 15px;margin-top: 10px;" />
							</div>
						</div>
						<img src="{icon}" style="width: 40px;height: 40px;border-radius: 5px;" />
					</div>




        </script>
        <!-- 他的图片视图 -->
        <script type="text/chatHeImg">
					<div class="flex flex-row" style="height: auto;margin-top: 15px;margin-bottom: 15px;margin-left: 20px;">
						<img src="{icon}" style="width: 40px;height: 40px;border-radius: 5px;" />
						<div class="flex flex-column">
							<input class="clear-bg" type="text" disabled="true" value="{time}" style="font-size: 12px;color: #989898;
								margin-left: 14px;"></input>
							<img src="{image}" style="width: 100px;height: 100px;margin-top: 5px;margin-left: 14px;" />
						</div>
					</div>




        </script>
        <!-- 我的图片视图 -->
        <script type="text/chatMyImg">
					<div class="flex flex-row j-end" style="height: auto;margin-top: 15px;margin-bottom: 15px;margin-right: 20px;">
						<div class="flex flex-column a-end">
							<input class="clear-bg" type="text" disabled="true" value="{time}" style="font-size: 12px;color: #989898;text-align: end;margin-right: 14px;"></input>
							<img src="{image}" style="width: auto;height: 100px;margin-top: 5px;margin-right: 14px;" />
						</div>
						<img src="{icon}" style="width: 40px;height: 40px;border-radius: 5px;" />
					</div>




        </script>
    </div>

    <div class="flex flex-column" style="background-color: #E6E6E6;">
        <div class="flex flex-row" style="height: 75px;width: 100%;">
            <!--            <img src="img/x.png"-->
            <!--                 style="width: 40px;height: 40px;margin-left: 20px;margin-top: 15px;cursor: pointer;"-->
            <!--                 onclick="onSendClose()"/>-->
            <input id="chatInput" type="text" placeholder="双击编辑，输入文字后发送" class="input"/>
            <img src="img/chat/chat_add.png"
                 style="width: 40px;height: 40px;margin-left: 20px;margin-top: 15px;cursor: pointer;"
                 onclick="onMoreAdd()"/>
            <div class="flex flex-row a-center j-center send">
                <label style="font-size: 16px;color: #FFFFFF;cursor: pointer;" onclick="onSendMsg()">发送</label>
            </div>
        </div>
        <div class="flex flex-row j-sb" id="chatMore"
             style="width: auto;height: 100px;margin-left: 50px;margin-right: 50px;display: none;text-align: left">
            <div class="flex flex-column  a-center">
                <img src="img/chat/chat_more_pic.png" class="more-img" onclick="tuPian()" id="test1"/>
                <label class="more-txt">发送图片</label>
            </div>
            <div class="flex flex-column  a-center">
                <img src="img/chat/chat_more_recipe.png" class="more-img" onclick="chuFang()"/>
                <label class="more-txt">开具处方</label>
            </div>
            <!--            <div class="flex flex-column  a-center">-->
            <!--                <img src="./img/chat/chat_more_skill.png" class="more-img" onclick="yiJi()"/>-->
            <!--                <label class="more-txt">开具医技</label>-->
            <!--            </div>-->
            <!--            <div class="flex flex-column  a-center">-->
            <!--                <img src="img/chat/chat_more_service.png" class="more-img" onclick="fuWuBao()"/>-->
            <!--                <label class="more-txt">服务包</label>-->
            <!--            </div>-->
            <div class="flex flex-column  a-center">
                <img src="img/chat/chat_more_suggest.png" class="more-img" onclick="jianYi()"/>
                <label class="more-txt">开具建议</label>
            </div>
            <div class="flex flex-column  a-center">
            </div>
            <div class="flex flex-column  a-center">
            </div>
            <div class="flex flex-column  a-center">
            </div>
            <div class="flex flex-column  a-center">
            </div>
        </div>
    </div>
</div>
<div class="flex flex-column" style="margin-left: 20px;">
    <div class="flex flex-row">
        <a href="#record" sid="#record" class="tab-style select">健康档案</a>
        <a href="#history" sid="#history" class="tab-style" style="margin-left: 15px;">看诊历史</a>
    </div>
    <div style="width: 605px;height: 700px;">
        <div id="record" class="full-page">
            <iframe align="center" width="100%" height="100%" src="page/diagnose/health_record.html" frameborder="no"
                    border="0" marginwidth="0"
                    marginheight="0" scrolling="no"></iframe>
        </div>
        <div id="history" class="full-page">
            <iframe align="center" width="100%" height="100%" src="page/diagnose/inquiry_history.html" frameborder="no"
                    border="0"
                    marginwidth="0" marginheight="0" scrolling="no"></iframe>
        </div>
    </div>
</div>
</body>
</html>
